/* eslint-disable @typescript-eslint/no-explicit-any */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { bar } from './index.css';
import { List, UIList } from '@knno/ui/jsx/list';
import { Button } from '@knno/ui/jsx/button';
import { Checkbox } from '@knno/ui/jsx/checkbox';
import { Group } from '@knno/ui/jsx/group';
import { Radio } from '@knno/ui/jsx/radio';
import { SelectType } from '@knno/ui/list';

function addData(parent: any, pid: string) {
	const rows: unknown[] = [];
	for (let i = 1; i <= 10; i++) {
		const row = { id: pid + '-' + i, text: pid + '-' + i + '：一些数据' + Math.floor(Math.random() * 5), children: [] };
		rows.push(row);
	}
	parent.children = rows;
}

const DATA = [
	{
		text: '数据1',
		children: [
			{
				text: '数据1-1',
				disable: true,
			},
			{
				text: '数据1-2',
				children: [
					{
						text: '数据1-2-1',
					},
					{
						text: '数据1-2-2',
					},
				],
			},
		],
	},
	{
		text: '数据2',
	},
	{
		text: '数据3',
		expand: true,
		children: [
			{
				text: '数据3-1',
			},
			{
				text: '数据3-2',
			},
		],
	},
];

export function ShowList() {
	let ls0: UIList;
	let ls1: UIList;
	return (
		<>
			<h2>数据列表（包括树列表）</h2>
			<div class={bar}>
				<Button
					type="primary"
					text="添加数据（动态加载子节点）"
					onclick={() => {
						const result: unknown[] = [];
						for (let i = 1; i <= 100; i++) {
							const row = { id: i + '', text: i + '：一些数据' + Math.floor(Math.random() * 5), children: [] };
							result.push(row);
							// result.push([]);
						}
						console.log('data generated!');
						[ls0, ls1].forEach((l) => l.rows(result));
					}}
				/>
				<Button
					type="primary"
					text="添加数据(完整)"
					onclick={() => [ls0, ls1].forEach((l) => l.rows(JSON.parse(JSON.stringify(DATA))))}
				/>
				<Button type="danger" text="删除数据" onclick={() => [ls0, ls1].forEach((l) => l.rows([]))} />
				<span style={{ margin: '0 1rem' }}> | </span>
				<Checkbox
					text="复选框"
					ref={(ck) => {
						ck.on('click', () => {
							if (ck.checked()) {
								[ls0, ls1].forEach((l) => l.selectable(true));
							} else {
								[ls0, ls1].forEach((l) => l.selectable(false));
							}
						});
					}}
				/>
				<span style={{ margin: '0 1rem' }}> | </span>
				<Checkbox
					text="行选择"
					ref={(ck) => {
						ck.on('click', () => {
							if (ck.checked()) {
								[ls0, ls1].forEach((l) => l.activable(true));
							} else {
								[ls0, ls1].forEach((l) => l.activable(false));
							}
						});
					}}
				/>
				<span style={{ margin: '0 1rem' }}> | </span>
				选择方式：
				<Group
					value={['any']}
					ref={(g) => {
						g.on('click', () => {
							[ls0, ls1].forEach((l) => l.selectType(g.value()[0] as SelectType));
						});
					}}
				>
					<Radio text="任意节点" checked value="any" />
					<Radio text="仅叶子节点" value="leaf" />
					<Radio text="级联选择" value="cascade" />
				</Group>
			</div>
			<List
				disableOn="disable"
				class="highligh-hover"
				column={{ text: 'text', children: 'children', expand: 'expand' }}
				ref={(l) => (ls0 = l)}
				onrowcheck={(evt) => {
					console.log(ls0.selected(), evt.detail.checked);
				}}
				onrowclick={(evt) => {
					console.log(ls0.activeValue(), evt.detail.row);
				}}
				onrowexpand={(evt) => {
					if (evt.detail.expand) {
						if ((evt.detail.row as any).children.length === 0) {
							addData(evt.detail.row, (evt.detail.row as any).id as string);
						}
						ls0.refresh('data');
					}
				}}
			/>
			<h2>自定义行高</h2>
			<List
				config={{ cellPadding: '0.3em' }}
				disableOn="disable"
				class="highligh-hover"
				column={{ text: 'text', children: 'children', expand: 'expand' }}
				ref={(l) => (ls1 = l)}
				onrowexpand={(evt) => {
					if (evt.detail.expand) {
						if ((evt.detail.row as any).children.length === 0) {
							addData(evt.detail.row, (evt.detail.row as any).id as string);
						}
						ls1.refresh('data');
					}
				}}
			/>
		</>
	);
}
